<template>
  <div class="dashboard-menu no-user-select">
    <!-- 新建 -->
    <a-dropdown :trigger="['click']">
      <div class="new-div">
        <a-button type="primary" class="new-btn">
          新建
          <a-icon type="down" />
        </a-button>
      </div>
      <a-menu slot="overlay">
        <a-menu-item><a href="javascript:;"><a-icon type="project" /> 项目</a></a-menu-item>
        <a-menu-item><a href="javascript:;"><a-icon type="windows" /> 文件夹</a></a-menu-item>
      </a-menu>
    </a-dropdown>
    <!-- end 新建 -->

    <div class="menu-list">
      <a-menu style="width: 240px" :default-selected-keys="['t0']" v-model="selectedMenu"  mode="vertical">
        <template v-for="(item, i) in menus">
          <a-menu-item v-if="item.type" :key="`t${i}`" @click="menuClick">
            <a-icon :type="item.icon" />
            <span>{{ item.label }}</span>
          </a-menu-item>
          <a-divider v-else :key="i" />
        </template>
      </a-menu>

      <!-- 回收站等 -->
      <div class="menu-list-footer">
        <div class="ad">广告位</div>
        <a-menu style="width: 240px" :default-selected-keys="selectedMenu" v-model="selectedMenu"  mode="vertical">
          <template v-for="(item, i) in menus2">
            <a-menu-item v-if="item.type" :key="`b${i}`" @click="menuClick">
              <a-icon :type="item.icon" />
              <span>{{ item.label }}</span>
            </a-menu-item>
            <a-divider v-else :key="i" />
          </template>
        </a-menu>
        <a-divider />
        <div class="tools">
          <a href="">
            <a-icon type="message" />
            客服</a>
          <a-divider type="vertical" />
          <a href="#">反馈</a>
          <a-divider type="vertical" />
          <a href="#">帮助</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'dashboard-menu',
  created() {
    console.log('组件：',this.$nuxt.$route.params.id)
  },
  methods:{
    menuClick:function({ key }){
      console.log(key)
      this.$nextTick(()=>{
        console.log(this.selectedMenu)
      })
    }
  },
  data() {
    return {
      selectedMenu:[],
      menus: [
        { type: true, label: '工作动态', icon: 'pie-chart' },
        { type: true, label: '企业全部项目', icon: 'desktop' },
        { type: false },
        { type: true, label: '我的工作台', icon: 'inbox' },
        { type: true, label: '我创建的', icon: 'inbox' },
        { type: true, label: '我加入的', icon: 'inbox' },
        { type: true, label: '星标项目', icon: 'inbox' },
        { type: false },
        { type: true, label: '设计系统', icon: 'inbox' },
        { type: true, label: '企业管理', icon: 'inbox' }
      ],
      menus2: [{ type: true, label: '回收站', icon: 'inbox' }]
    };
  }
};
</script>

<style lang="less" scoped>
.ant-divider-horizontal {
  margin: 5px 0;
}
.ant-dropdown-menu{
  border-radius: 0;
}
.dashboard-menu {
  width: 240px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .new-div {
    margin: 20px 0;
    .new-btn {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: @dashboard-left-content-w;
      > .anticon {
        position: absolute;
        display: flex;
        align-items: center;
        width: 20px;
        height: 20px;
        right: 6px;
        top: 6px;
        border-radius: 2px;
        overflow: hidden;
      }
    }
  }

  .menu-list {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .ant-menu {
      display: flex;
      flex-direction: column;
      align-items: center;
      border-right: 0;
      .ant-menu-item {
        width: @dashboard-left-w;
        margin: 0;
        padding: 0 @dashboard-left-content-padding;
      }
    }
  }
  .menu-list-footer{
    .tools{
      width: @dashboard-left-w;
      padding: 10px @dashboard-left-content-padding;
    }
  }
}
</style>
